<template>
	<view style="padding: 40rpx;">
		<!-- #f1f4fe -->
		<view>
			<view style="font-size: 34rpx;font-weight: 600;">接单信息</view>
			<view class="content">
				<view class="content-c">
					<text style="font-weight: 600;">接单人</text>
					<text style="margin-left: 60rpx;">{{detail.nickname}}</text>
				</view>
				<view class="content-c content-t" v-if="detail.user_content != '' ">
					<text style="width: 75%;font-weight: 600;">帖子链接</text>
					<text class="contet-text" @click="tomap(detail.user_content)">复制链接</text>
					<view class="contet-view">
						{{detail.user_content}}
					</view>
				</view>
				<view class="content-c content-t" v-if="detail.statistics_num > 0 ">
					<text style="font-weight: 600;">帖子流量数量</text>
					<text style="margin-left: 60rpx;">{{detail.statistics_num}}</text>
				</view>
				<view class="content-c content-t"  style="border-bottom:0 !important;" v-if="detail.user_imgs != '' ">
					<text style="width: 75%;font-weight: 600;">曝光截图</text>
					<view style="margin-top: 50rpx;">
						<image class="img_message" :src="detail.user_imgs"  mode="widthFix" @click="clickImg()"  @load="loadImg"></image>
					</view>
				</view>
			</view>

			<view style="font-size: 34rpx;font-weight: 600;margin-top: 60rpx;">原始文案标题内容</view>
			<view class="content" style="margin-bottom: 100rpx;">
				<view class="content-c" style="display: flex;flex-wrap: wrap;">
					<text style="font-weight: 600;width: 20%;">标题</text>
					<text style="width: 78%;">{{detail.title}}</text>
				</view>
				<view class="content-c content-t">
					<text style="font-weight: 600;">发布时间</text>
					<text style="margin-left: 60rpx;">{{detail.receive_time}}</text>
				</view>
				<view class="content-c content-t" style="border-bottom:0 !important;">
					<text style="width: 100%;font-weight: 600;">内容</text>
					<view class="contet-view">
						{{detail.content}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_tishi:false,
				is_local:'',
				check:0,
				statusBarHeight:20,
				id:'',
				detail:'',
				comment:'',
				commentTotal:'',
				commentList:'',
				relatedList:[],
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				userInfo:'',
				showdaohang:false,
				xcx_qun_ewm:'',
				show_share_tips:false,
				share_tips:'',
				sPopup:false,
				showHaibao:false,
				collect:0,
				haibao:'',
				isComment:false,
				isReport:false,
				is_app:false,
				windowWidth:0,
				swiperHeight:350,
				current:0,
				wHeight:0,
				title:'',
				time1:'',
				time_str:'',
				titleReport:'',
				timer: null, //重复执行
			}
		},
		onLoad(p) {
			 // #ifdef APP-PLUS ||H5
				this.is_app = true;
			// #endif
			//判断是否是华为
			let isHuaWei= getApp().globalData.isHuaWei;
			this.setData({
				isHuaWei: isHuaWei
			})

			this.userInfo=uni.getStorageSync('userInfo');
			if(p.scene){
				this.id = p.scene;
			}else{	
				this.id = p.id;
			} 
            if(p.time1){
				this.time1 = p.time1;
				if(this.time1 > 0){
					this.countDown();
				}
            }
			this.getDetail();		

			
			
		},
		onShow() {
		},
		methods: {
            receive(item,type){
                if(item.status == 1 || item.status == -1){
					if(type == 1){
						if(item.user_content){
							this.$Toast('您已回传链接,请勿重复操作!');
							return false;
						}
						this.toPages('/subone/user/distribute_task_add?type=1&id='+item.id);
					}else if(type == 2){
						if(item.is_receive_time == 1){
							this.toPages('/subone/user/distribute_task_add?type=2&id='+item.id);
						}else{
							this.$Toast('请次日回传包含浏览量截图进行审核!'); 
						}
					}else{
						this.toPages('/subone/user/distribute_task_add?type=3&id='+item.id);
					}
                }else{
                    this.$Toast('当前状态无法提交回传信息!');
                }
                
            },
			toPages_tishi2(){
				this.is_tishi2 = false;
				this.toPages('/subone/user/task');
			},
			loadImg() {
				this.getCurrentSwiperHeight('.img_message');
			},
			// 轮播切换
			viewChange(e) {
				this.current = e.target.current;
				this.getCurrentSwiperHeight('.img_message');
			},
			// 动态获取内容高度
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					// 切换到其他页面swiper的change事件仍会触发，这时获取的高度会是0，会导致回到使用swiper组件的页面不显示了
					if (this.detail.imgs.length && res[0][this.current].height) {
					this.swiperHeight = res[0][this.current].height;
					}
				});
			},
			clickImg() {
				var url = this.detail.user_imgs;
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			tomap:function(str){
                var that = this;
				uni.setClipboardData({
					data:str,
					success:function(){
						that.$Toast('复制成功')
					}
				});
			},
			getDetail:function(){
				uni.request({
                	url: 'https://oa.yuxiang123.cn/api/distribute_task/getInfo',
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data:{
						token:uni.getStorageSync('token'),
						id:this.id,
						type:1
					},
					success: (res) => {
						if(res.data.code == 1){
							this.detail = res.data.data;
							//判断是否弹出过  弹出则第二次不弹
							if(!uni.getStorageSync(this.detail.receive_time+''+this.userInfo.id)){
								this.is_tishi = true;
								uni.setStorageSync(this.detail.receive_time+''+this.userInfo.id,1);
							}
						}
					}
				})
			},
			toPages:function(url){
				uni.navigateTo({
					url:url
				})
			},
			download_haibao(){
				var that=this;
				uni.getSetting({
	                 success(res) {
	                   if (!res.authSetting['scope.writePhotosAlbum']) {
		                     uni.authorize({
		                       scope: 'scope.writePhotosAlbum',
		                       success() {
			                         that.saveImgToLocal();
		                       },
		                       fail() {//这里是用户拒绝授权后的回调
		                           that.openSettingBtnHidden=false
		                       }
		                     })
	                   } else {//用户已经授权过了
							that.saveImgToLocal();
				       }
			        }
			    })
			},
			saveImgToLocal(){
				var that=this;
                var imgs = that.detail.imgs_arr;
                imgs.forEach((url)=>{
                    uni.downloadFile({
                        url: url,//图片地址
                        success: (res) =>{
                            if (res.statusCode === 200){
                                uni.saveImageToPhotosAlbum({
                                    filePath: res.tempFilePath,
                                    success: function() {
                                    },
                                });
                            } 
                        }
                    });
                })
                uni.showToast({
                    title: "保存成功",
                    icon: "none"
                });
			},
			
			//订单倒计时
			countDown:function(){
				var that = this;
				clearInterval(that.timer);
				var num=0;
				that.timer = setInterval(function() {
					var create_time = that.time1 - num;   
					if(create_time <= 0) {
						//当前倒计时结束
						that.$Toast('未按时回传链接,任务已取消');
						setInterval( () => {
							this.toPages('/subone/user/distribute_task');
						}, 900)
						clearInterval(that.timer)
					}else {
						that.time_str = that.timestampToTime(create_time);
					}
					num++
				},1000)
			},
			timestampToTime(s) {
				var h = Math.floor(s / 3600 )
				var min = Math.floor(s / 60) % 60
				var sec = s % 60
				h = this.add(h)
				min = this.add(min)
				sec = this.add(sec)
				return h + '：' + min + '：' + sec
			},
			add(m) {
				return m < 10 ? '0' + m : m
			},
		
		}
	}
</script>
<style>
	page{
		background-color: #f2f9fd;
		
	}
</style>
<style lang="scss">
.content-c{
	padding-bottom: 30rpx;
	border-bottom: 1px solid #f5f2f2;
}
.content-t{
	display: flex;
	flex-wrap: wrap;
	padding-top: 50rpx;
}
.contet-view{
	background: #F1F4FE;
    padding: 30rpx;
    margin-top: 40rpx;
    border-radius: 20rpx;
    line-height: 48rpx;
}
.contet-text{
	width: 24%;
    border: 1px solid #3662EC;
    text-align: center;
    height: 45rpx;
    line-height: 45rpx;
    border-radius: 40rpx;
    font-size: 24rpx;
	color: #3662EC;
}


.content{
	width: 90%;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 5%;
	margin-top: 30rpx;
}

</style>
